<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChromeHub</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="styles/main.css">
    <link rel="icon" href="assets/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">

</head>
<body class="bg-gray-50 flex flex-col min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-lg fixed w-full top-0 z-50">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <img src="assets/logo5_256_256.png" alt="Chrome Logo" class="h-8 w-8 mr-2">
                    <span class="text-xl font-bold text-gray-800">ChromeHub</span>
                </div>
                <div class="flex items-center">
                    <div class="relative">
                        <input type="text" id="search" 
                               placeholder="搜索插件..." 
                               class="w-64 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
                    </div>
                    <a href="detail.html" class="ml-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
                        Chrome能力详解
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="max-w-7xl mx-auto px-4 pt-20 pb-24 flex-grow">
        <!-- 项目介绍 -->
        <div class="text-center py-8">
            <h1 class="text-4xl font-bold text-gray-800 mb-4">100+ Chrome插件创意</h1>
            <p class="text-xl text-gray-600">探索丰富的Chrome插件创意，激发您的开发灵感</p>
        </div>

        <!-- 分类过滤器 -->
        <div class="flex space-x-4 py-4 overflow-x-auto whitespace-nowrap mb-8">
            <button class="category-btn active px-4 py-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition">全部</button>
            <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">工作效率</button>
            <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">学习辅助</button>
            <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">开发调试</button>
            <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">数据分析</button>
            <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">社交互动</button>
            <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">生活便利</button>
            <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">安全隐私</button>
            <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">娱乐体验</button>
        </div>

        <!-- 插件卡片网格 -->
        <div id="plugins-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- 插件卡片将通过JavaScript动态生成 -->
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-3 fixed bottom-0 w-full">
        <div class="max-w-7xl mx-auto px-4 text-center">
            <p>ChromeHub &copy; 2024</p>
        </div>
    </footer>

    <script src="js/plugins-data.js"></script>
    <script src="js/main.js"></script>
</body>
</html>
